import { Carousel } from 'antd';
import { useRef } from 'react';

import LeftImg from '@/assets/img/left.png';
import RightImg from '@/assets/img/right.png';

export default function bannerBlock({ list }: any) {
  const carouselRef = useRef<any>(null);
  return (
    <div className="relative mx-auto w-[1600px] max-w-[1600px]">
      <Carousel autoplay infinite ref={carouselRef}>
        {list.map((item: any, index: number) => {
          return (
            <a href={item.href} key={index} target="_blank" rel="noreferrer">
              <img className="swiper-item w-full" src={item.picPath} alt="img" />
            </a>
          );
        })}
      </Carousel>
      <img
        src={LeftImg}
        alt="left"
        className="absolute left-[80px] top-[50%] mt-[-40px] h-[80px] w-[80px]"
        onClick={() => carouselRef.current.prev()}
      />
      <img
        src={RightImg}
        alt="right"
        className="absolute right-[80px] top-[50%] mt-[-40px] h-[80px] w-[80px]"
        onClick={() => carouselRef.current.next()}
      />
    </div>
  );
}
